
// 封装成一个类 
// 属性 
//    1. banner 元素  承载左箭头右箭头的事件委托
//    2. 图片或者背景  
//    3. 承载焦点的盒子  
//    4. timer 用来存放定时器  
//    5. index 用来存放当前显示的图片的索引
// 方法
//    1. 生成焦点
//    2. 自动轮播
//    3. 鼠标移入移出
//    4. 点击焦点切换
// 实例化对象 (轮播)

class Banner {
    constructor(selector,options = {}){
        this.banner = document.querySelector(selector);
        
        this.imgBox = this.banner.querySelector('.imgBox');
        
        this.pointBox = this.banner.querySelector('.pointBox');

        this.timer = 0; // 定时器
        this.index = 0; // 当前显示的图片的索引 当前第几张
        this.option = options; // 传入的参
        // alert(this.option.duration);
        // transition: all 1s linear;  // 过渡效果
        for(let j=0;j<this.imgBox.children.length;j++){
            this.imgBox.children[j].style.transition = `all ${(this.option.sped || 300) / 1000 }s linear`;

        }
        this.setPoint(); // 生成焦点
        this.autoPlay(); // 自动轮播
        this.overOut(); // 鼠标移入移出
        this.bindEvent(); // 点击焦点切换
    }

    // 生成焦点
    setPoint(){
        // 1. 根据图片的数量生成焦点
        const pointNum = this.imgBox.children.length;
        // alert(pointNum);
        // 2. 循环生成焦点
        // 创建li标签
        for(let i=0;i<pointNum;i++){
            const li = document.createElement('li');
            li.classList.add('item');
            // 默认让第一个li有active类名 高亮
            if(i===0) li.classList.add('active');
            // 给每个li编号 方便后边输入移入或者点击它知道到底是哪个按钮
            li.dataset.point = i;
            this.pointBox.appendChild(li);
        }

    }


    // 切换图片的方法
    // 自动轮播和点击焦点切换都会调用这个方法
    // true 下一张 
    // false 上一张
    // 数字  某一张  
    // 切换的时候做一件事情  所有的图片全部隐藏
    // 所有的按钮全部取消高亮

    // 切换到上一张  当前这一张 取消 active 上一张 添加 active
    // 切换到下一张  当前这一张 取消 active 下一张 添加 active
    // 切换到某一张  当前这一张 取消 active 某一张 添加 active
    
    // 上一张  index -- 
    // 下一张  index ++
    // 某一张  index = 某一张的索引
    changeOne(type){
        // this.index 表示当前的页码
        this.imgBox.children[this.index].classList.remove('active');
        this.pointBox.children[this.index].classList.remove('active');

        if(type === true){
            //下一张
            this.index++;

        }
        else if(type === false){
            //上一张
            this.index--;
        }
        else{
            //某一张
            this.index = type;

        }
        // 判断边界
        if(this.index>=this.imgBox.children.length){
            this.index = 0;
        }
        // 0 1 2 3 4 0 
        if(this.index<0){
            this.index = this.imgBox.children.length-1;
        }
        //  4 0 1 2 3 4

        this.imgBox.children[this.index].classList.add('active');
        this.pointBox.children[this.index].classList.add('active');

    }


    // 自动轮播
    autoPlay(){
        // 1. 定时器
        this.timer = setInterval(()=>{
            // 2. 切换图片
            this.changeOne(true);
        },1000);
    }

    // 鼠标移入移出
    overOut(){
        // 1. 移入
        this.banner.onmouseover = ()=>{
            clearInterval(this.timer);
        }
        // 2. 移出
        this.banner.onmouseout = ()=>{
            this.autoPlay();
        }
    }

    // 各种事件
    bindEvent(){
        this.banner.addEventListener('click',e=>{
         if(e.target.className === 'item'){
            // alert(e.target.dataset.point - 0);
            this.changeOne(e.target.dataset.point - 0);
         }

         if(e.target.className === 'prev'){
            this.changeOne(false);
         }

         if(e.target.className === 'next'){
            this.changeOne(true);
         }

        })
    }
}